<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <pre id='coordinates' class='coordinates'></pre>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
  name: "AddDragMarker.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
      MapboxCommonService.setCZBP(map, [0, 0], 2)

      let coordinates = document.getElementById('coordinates');
      let marker = new mapboxgl.Marker({
        draggable: true
      }).setLngLat([0, 0]).addTo(map);

      const onDragEnd = () => {
        var lngLat = marker.getLngLat();
        coordinates.style.display = 'block';
        coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
      }

      marker.on('dragend', onDragEnd);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
.coordinates {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  bottom: 40px;
  left: 10px;
  padding: 5px 10px;
  margin: 0;
  font-size: 11px;
  line-height: 18px;
  border-radius: 3px;
  display: none;
}
</style>